<template>
  <div :class="isBig?'big-foot-content':'foot-content'">
    <div class="new-absolute">
      <i v-if="!isBig" title="全屏" class="iconfont icon-quanping" @click="toggleShow"></i>
      <i v-else title="最小化" class="iconfont icon-zuixiaohua" @click="toggleShow"></i>
    </div>
    <Removal v-if="viewFoot.viewFoot=='Removal'" ref="Removal" :opera-id="operaId" />
    <Add v-if="viewFoot.viewFoot=='Add'" ref="Add" :key="viewFoot.id" :opera-id="operaId" />
    <OutPut v-if="viewFoot.viewFoot=='OutPut'" ref="OutPut" :opera-id="operaId" />
    <Source v-if="viewFoot.viewFoot=='Source'" ref="Source" :opera-id="operaId" />
    <DataMap v-if="viewFoot.viewFoot=='DataMap'" ref="DataMap" :opera-id="operaId" />
    <FilterWord v-if="viewFoot.viewFoot=='FilterWord'" ref="FilterWord" :opera-id="operaId" />
  </div>
</template>

<script>
import Source from "./step/source";
import Removal from "./step/removal";
import Add from "./step/add";
import OutPut from "./step/outPut";
import DataMap from "./step/dataMap";
import FilterWord from "./step/filter";
import { setTimeout } from "timers";

export default {
  data() {
    return {
      isBig: false
    };
  },
  props: {
    operaId: {
      type: String,
      defaule: ""
    }
  },
  methods: {
    toggleShow() {
      this.isBig = !this.isBig;
    }
  },
  components: {
    Source,
    Removal,
    Add,
    OutPut,
    DataMap,
    FilterWord
  },
  computed: {
    viewFoot(val) {
      return this.$store.state.tree.viewFoot;
    }
  }
};
</script>

<style lang='scss' scoped>
.foot-content {
  position: relative;
  height: 100%;
  padding: 20px 50px 20px 20px;
  overflow: auto;
}
.big-foot-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 96%;
  height: 93%;
  background: #fff;
  z-index: 1000;
  padding: 20px 50px 20px 20px;
  overflow: auto;
}
.new-absolute {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  cursor: pointer;
}
.foot-wrap {
  height: 100%;
  overflow: auto;
  padding: 0 20px 20px 0;
}
/deep/ {
  .el-form-item__label {
    color: #666;
  }
}
</style>
